import { Button } from 'antd-mobile'
import style from '../pages/home/index.module.css'
import { useNavigate } from 'react-router-dom';

// 医生数据接口
interface DoctorData {
    id: number;
    doctorid?: number;  // 添加 doctorid 属性
    doctorname: string;
    doctorcity: string;
    doctoradministre: string;
    socoadmin: string;
    doctorimage: string;
    doctorgood: number;
    doctorbrowse: number;
    doctorprice?: number;
    doctorstate?: string;
    department?: string;
}

interface DoctorCardProps {
    doctor: DoctorData;
    department: string;
    index: number;
}

function DoctorCard({ doctor, department, index }: DoctorCardProps) {
    const nav=useNavigate()
    return (
        <div key={`${department}-${index}`} className={style.doctorCard} 
        onClick={()=>nav(`/doctor_schedule/${doctor.doctorid || doctor.id}`)}
        >
            <img src={doctor.doctorimage} alt={doctor.doctorname} className={style.doctorImage} />
            <div className={style.doctorInfo}>
                <div className={style.doctorName}>
                    {doctor.doctorname} 
                    <span style={{ fontSize: '13px', fontWeight: '200',marginLeft: '5px', color:"#000"}}>
                        {doctor.doctorstate}
                    </span>

                    
                    <span style={{ fontSize: '12px', fontWeight: '200', color: '#fff', 
                        backgroundColor: '#09bf85',marginLeft: '5px', padding: '2px 8px',borderRadius:'3px' }}>
                        {doctor.socolv}
                    </span>
                </div>
                <div className={style.doctorDetails}>
                      <p>{doctor.doctorcity}</p>
                    <span>{doctor.doctoradministre}</span> | 
                    <span>{doctor.socoadmin}</span> 
                  
                </div>
                <div className={style.doctorStats}>
                    <span>收藏：<span style={{color:'#f36c38', fontWeight:'bold'}}>{doctor.doctorgood}</span> </span>
                    <span>浏览人数：<span style={{color:'#f36c38', fontWeight:'bold'}}>{doctor.doctorbrowse}</span> </span>
                </div>
               <div>
                <p style={{width:'100%',height:'15px',color:'#ccc', overflow:'hidden'}}>
                 擅长：   {doctor.socodescword}
                </p>
               </div>
                <div style={{marginTop: '10px'}}>
                    <span style={{ color: '#ff0000' }}>￥{doctor.doctorprice}</span>
                    <Button  onClick={()=>nav(`/doctor_schedule/${doctor.doctorid || doctor.id}`)}
                        size="small"
                        style={{ background: '#2579e0', color: "#fff", float: 'right',borderRadius:'10px' }}
                    >
                        问医生
                    </Button>
                </div>
            </div>
        </div>
    )
}

export default DoctorCard
